<template>
  <l-layout class="l-tab-page" v-if="!lr_loadPage">
    <template #left>
      <l-panel style="padding-right:0;">
        <template #title>
          {{ $t("角色分类") }}
          <div
            class="tree-setting-btn"
            v-if="lr_hasPageAuth('classifysSetting', 'buttons')"
          >
            <el-tooltip effect="dark" :content="$t('分类管理')" placement="top">
              <el-button
                @click="handleSettingClick"
                type="text"
                icon="el-icon-setting"
              ></el-button>
            </el-tooltip>
          </div>
        </template>
        <el-tree
          class="learun-tree"
          :data="dataItemTree_Rolecategory"
          @node-click="handleNodeClick"
        >
          <span class="lr-tree-node" slot-scope="{ node }">
            <i class="el-icon-notebook-2"></i>
            {{ $t(node.label) }}
          </span>
        </el-tree>
      </l-panel>
    </template>
    <l-panel style="padding-left:0;">
      <template #toolLeft>
        <div class="l-panel--item">
          <el-input
            :placeholder="$t('请输入编码/名称')"
            @keyup.enter.native="hanleSearch"
            v-model="searchWord"
            size="mini"
          >
            <el-button
              @click="hanleSearch"
              slot="append"
              icon="el-icon-search"
            ></el-button>
          </el-input>
        </div>
      </template>
      <template #toolRight>
        <l-tool-btns @click="handleAdd()">
          <l-excel-btns></l-excel-btns>
        </l-tool-btns>
      </template>
      <l-table
        ref="mainTable"
        :columns="lr_getPageColumns(columns)"
        :dataSource="tableShowData"
        :loading="loading"
      >
        <template v-slot:f_CreateDate="scope">
          {{ lr_dateFormat(scope.row.f_CreateDate) }}
        </template>
        <template v-slot:f_Category="scope">
          {{
            lr_dataItemName(lr_dataItem["rolecategory"], scope.row.f_Category)
          }}
        </template>
        <template v-slot:f_EnabledMark="scope">
          <el-switch
            :active-value="1"
            :inactive-value="0"
            v-model="scope.row.f_EnabledMark"
            @change="handleEnableChange(scope.row)"
          >
          </el-switch>
        </template>
        <l-table-btns
          :btns="tableBtns"
          @click="lr_handleTableBtnClick"
        ></l-table-btns>
      </l-table>
    </l-panel>

    <l-dialog
      :title="formTitle"
      :visible.sync="formVisible"
      @ok="handleSave"
      @close="handleCloseForm"
      @opened="handleOpenedForm"
    >
      <my-form ref="form"></my-form>
    </l-dialog>

    <l-drawer
      :title="$t('分类管理')"
      :visible.sync="classifysVisible"
      :showOk="false"
      :showClose="false"
      size="800px"
    >
      <l-dataitem-index classifyCode="rolecategory"></l-dataitem-index>
    </l-drawer>

    <!--成员添加-->
    <l-fullscreen-dialog
      :title="`${$t('成员添加')}-${authName}`"
      :visible.sync="userRelationVisible"
      @ok="handleSaveUserRelation"
      @opened="handleOpenedUserRelation"
      @closed="handleClosedUserRelation"
    >
      <user-relation ref="userRelation"></user-relation>
    </l-fullscreen-dialog>
  </l-layout>
</template>
<script>
const api = window.$api.organization.role;
import MyForm from "./form";
import UserRelation from "./userRelation";

export default {
  components: {
    MyForm,
    UserRelation,
  },
  props: {},
  data() {
    return {
      lr_isPage: true,

      classifysVisible: false,
      category: "",
      //查询
      searchWord: "",
      searchTableData: null,

      loading: false,
      columns: [
        { label: "编号", prop: "f_EnCode", minWidth: "110" },
        { label: "名称", prop: "f_FullName", minWidth: "120" },
        {
          label: "分类",
          prop: "f_Category",
          width: "100",
          align: "center",
          dataType: "dataItem",
          dataCode: "rolecategory",
        },
        {
          label: "创建时间",
          prop: "f_CreateDate",
          width: "160",
          align: "center",
          dataType: "datetime",
          format: "yyyy-MM-dd HH:mm:ss",
        },
        {
          label: "创建人",
          prop: "f_CreateUserName",
          width: "88",
          align: "center",
        },
        { label: "有效", prop: "f_EnabledMark", width: "64", align: "center" },
      ],
      tableBtns: [
        { prop: "Edit", label: this.$t("编辑"),width:40 },
        { prop: "Delete", label: this.$t("删除"),width:40 },
        { prop: "MemberAdd", label: this.$t("添加成员"), width: 60 },
      ],
      tableData: [],

      formVisible: false,
      formTitle: "",
      formEditRow: null,
      formEdit: false,

      userRelationVisible: false,
      authName: "",
      selectDUser: [],
    };
  },
  computed: {
    dataItemTree_Rolecategory() {
      return this.lr_dataItemTree(this.lr_dataItem["rolecategory"]);
    },
    tableShowData() {
      return this.searchTableData || this.tableData;
    },
  },
  mounted() {
    this.lr_loadDataItem("rolecategory");
    this.loadTableData();
  },
  methods: {
    async loadTableData() {
      this.loading = true;
      await this.lr_loadRoles(false);
      this.searchTableData = null;
      this.searchWord = "";
      this.tableData = this.lr_roles;
      this.loading = false;
    },
    handleSettingClick() {
      this.classifysVisible = true;
    },

    handleNodeClick(data) {
      this.category = data.value;

      this.searchTableData = this.tableData.filter(
        (item) => item.f_Category == this.category
      );
    },
    hanleSearch() {
      if (this.searchWord) {
        this.searchTableData = this.tableData.filter(
          (item) =>
            item.f_FullName.indexOf(this.searchWord) > -1 ||
            item.f_EnCode.indexOf(this.searchWord) > -1
        );
      } else {
        this.searchTableData = null;
      }
    },

    handleEnableChange(row) {
      api.update(row.f_RoleId, this.$deepClone(row)).then(() => {
        this.$message({
          type: "success",
          message: this.$t("更新成功!"),
        });
      });
    },
    handleAdd() {
      this.formEdit = false;
      this.showForm("新增角色");
    },
    handleEdit($index, row) {
      this.formEdit = true;
      this.formEditRow = row;
      this.showForm("编辑角色");
    },
    handleDelete($index, row) {
      this.$confirm(
        this.$t("此操作将永久删除该数据, 是否继续?"),
        this.$t("提示"),
        {
          confirmButtonText: this.$t("确定"),
          cancelButtonText: this.$t("取消"),
          type: "warning",
        }
      )
        .then(() => {
          api.remove(row.f_RoleId).then(() => {
            this.$message({
              type: "success",
              message: this.$t("删除成功!"),
            });
            this.loadTableData();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: this.$t("已取消删除"),
          });
        });
    },
    handleSave(showLoading, hideLoading) {
      this.$refs.form.validateForm(() => {
        showLoading();
        const formData = this.$refs.form.getForm();
        if (this.formEdit) {
          // 修改数据
          api
            .update(formData.f_RoleId, formData)
            .then(() => {
              hideLoading();
              this.formVisible = false;
              this.$message({
                type: "success",
                message: this.$t("更新成功!"),
              });
              this.loadTableData();
            })
            .catch(() => {
              hideLoading();
            });
        } else {
          // 新增数据
          api
            .add(formData)
            .then(() => {
              hideLoading();
              this.formVisible = false;
              this.$message({
                type: "success",
                message: this.$t("添加成功!"),
              });
              this.loadTableData();
            })
            .catch(() => {
              hideLoading();
            });
        }
      });
    },
    handleOpenedForm() {
      if (this.formEdit) {
        this.$refs.form.setForm(this.formEditRow);
      }
    },
    handleCloseForm() {
      this.$refs.form.resetForm();
    },
    showForm(text) {
      this.formTitle = text;
      this.formVisible = true;
    },

    /*成员添加*/
    handleMemberAdd($index, row) {
      this.formEditRow = row;
      this.authName = row.f_FullName;
      this.userRelationVisible = true;
    },

    async handleOpenedUserRelation(showLoading, hideLoading) {
      showLoading();
      await this.$refs.userRelation.setForm(this.formEditRow.f_RoleId, 1);
      hideLoading();
    },
    handleClosedUserRelation() {
      this.$refs.userRelation.resetForm();
    },
    async handleSaveUserRelation() {
      await this.$refs.userRelation.saveForm();
      this.userRelationVisible = false;
    },
  },
};
</script>
